<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style>
        body {
            display: block;
            margin: 0;
        }
        .vuefor {
            display: block;
            background: #F8F8F8;
            margin-bottom: 5px;
            
        }

        .fleft {
            float: left;
        }

        .fright {
            float: right;
        }

        .clear {
            clear: both;
        }

        /* 工具条 */
        .editor-box .tool-box {
            width: 100%;
            text-align: center;
            display: inline-block;
            background: #e6e6e6;
        }

        .editor-box .tool-item {
            font-size: 12px;
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 2px;
            background-color: #fff;
            cursor: pointer;
        }

        .editor-box .tool-item.active {
            color: #fff;
            background-color: #19be6b;
        }

        /* 文本 */
        .editor-box .editor-item .content .text-box {
            display: block;
            text-align: center;
        }

        /* 文本工具条 */
        .editor-box .editor-item .content .text-box .head {
            display: block;
            width: 100%;
        }

        .editor-box .editor-item .content .text-box .head div {
            font-size: 16px;
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 15px;
            background-color: #fff;
            cursor: pointer;
        }

        .editor-box .editor-item .content .text-box .input {
            text-align: left;
            clear: both;
            display: block !important;
            vertical-align: middle;
            /* 加了可实现纯textarea功能，不加则像富文本一样可以写入css样式和HTML标签 */
            user-modify: read-write-plaintext-only;
            -webkit-user-modify: read-write-plaintext-only;
            /* 必须加，不然移动端有些浏览器无光标 */
            user-select: auto;
            -webkit-user-select: auto;
            background-color: #fff;
            padding: 5px 0;
        }

        .editor-box .editor-item .content .text-box .input:empty:before {
            content: attr(placeholder);
            color: #e6e6e6;
        }

        .editor-box .editor-item .content .text-box .foot {
            height: 30px;
            line-height: 30px;

        }

        .editor-box .editor-item .content .text-box .foot .color-item {
            display: inline-table;
            margin: 2px;
            vertical-align: middle;
        }

        .editor-box .editor-item .content .text-box .foot .color-item span {
            width: 20px !important;
            height: 20px !important;
            border-radius: 20px;
            padding: 4px;
            border: 1px solid #999;
            display: block;
            cursor: pointer;
        }

        .editor-box .editor-item .content .text-box .foot .color-item span:empty:before {
            content: "\200b";
        }

        /* 分割线 */
        .editor-box .editor-item .content .line-box {
            display: block;
            text-align: center;
        }

        .editor-box .editor-item .content .line-box hr {
            height: 1px;
            margin: 10px 0;
            border: 0;
            clear: both;
            background-color: #909399;
        }

        /* 图片 */
        .editor-box .editor-item .content .img-box {
            display: block;
            text-align: center;
        }

        .editor-box .editor-item .content .img-box img {
            width: 100%;
        }
        /* 保存 */
        .editor-box .submit-box{
            margin:10px auto;
            text-align: center;
            background: #e6e6e6;
            padding:10px;
        }
        .editor-box .submit-box button{
            height: 30px;
            line-height: 30px;
            color:#fff;
            background-color: #19be6b;
            border:1px solid #999;
            border-radius: 3px;
        }
        @media only screen and (min-width: 1029px){
            body {
                display: block;
                margin: 0 auto;
            }
            .editor-box{
                width:480px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    <div class="editor-box vue-container">
        <div class="vuefor" v-for="(item,index) in editorData">
            <div class="tool-box">
                <div class="fleft">
                    <label class="tool-item " :class="{'active' : (item.length !=0 && item.mytype==1) }" v-on:click.stop="itemAdd(index,1)">
                        <div class="text">文字</div>
                    </label>
                    <label class="tool-item " :class="{'active' : (item.length !=0 && item.mytype==2) }" v-on:click.stop="itemAdd(index,2)">
                        <div class="text">图片</div>
                    </label>
                    <label class="tool-item " :class="{'active' : (item.length !=0 && item.mytype==3) }" v-on:click.stop="itemAdd(index,3)">
                        <div class="text">分割</div>
                    </label>
                </div>
                <div class="fright">
                    <label class="tool-item " v-on:click.stop="itemUp(index)">
                        <div class="text">↑</div>
                    </label>
                    <label class="tool-item " v-on:click.stop="itemDown(index)">
                        <div class="text">↓</div>
                    </label>
                    <label class="tool-item " v-on:click.stop="itemDel(index)">
                        <div class="text">X</div>
                    </label>
                </div>
            </div>
            <div class="editor-item" v-if="item.length !=0">
                <div class="content" v-if="item.mytype==1">
                    <!--文字类型的输入框-->
                    <div class="text-box">
                        <div class="head">
                            <div title="加粗" v-on:click.stop="fontWeight(index)">B</div>
                            <div title="放大字体" v-on:click.stop="fontInc(index)" v-bind:class="{ 'head-btn': true}">+</div>
                            <div title="缩小字体" v-on:click.stop="fontDec(index)" v-bind:class="{ 'head-btn': true}">-</div>
                            <div title="删除线" v-on:click.stop="fontDel(index)" v-bind:class="{ 'head-btn': true}" style="text-decoration: line-through;">A</div>
                            <div title="下划线" v-on:click.stop="fontLine(index)" v-bind:class="{ 'head-btn': true}" style="text-decoration: underline;">A</div>
                            <div title="居中" v-on:click.stop="fontAlign(index)" v-bind:class="{ 'head-btn': true}">≡</div>
                        </div>
                        <div class="input clear" contenteditable=true v-bind:style="initStyle(index)" placeholder="请输入" v-html="item.content"
                             @blur="item.content=$event.target.innerText"></div>
                        <div class="foot">
                            <div class="color-list fright">
                                <div class="color-item" v-for="color in colors">
                                    <span v-on:click.stop="fontSetColor(index,color)" v-bind:style="initFontColor(color)"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" v-if="item.mytype==2" style="">
                    <!--图片-->
                    <div class="img-box">
                        <img v-if="item.default==1" v-bind:src="item.content" alt="" />
                        <img class="loading" v-if="item.default==0" src="" @click="changeCoverImg($event,index)"
                             alt="" />
                        <input
                             type="file"
                             :ref="`fileInput${index}`"
                             accept="image/*"
                             @change="getFile($event,index)"
                             style="display: none">
                    </div>
                </div>
                <div class="content" v-if="item.mytype==3">
                    <!--分割线-->
                    <div class="line-box">
                        <hr>
                    </div>
                </div>
                <div class="clear" style=""></div>
            </div>
        </div>
        <div class='submit-box'><button v-on:click.stop="submit"> 保存数据 </button></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    var pageData = {
        editorData: [
            {"mytype": 1, "content": "文字", "style": {'font_size': '18px', 'font_weight': '', 'text_decoration': '', 'text_align': 'left', 'color': '#303133'}}
            , {"mytype": 2, "content": "", "default": 0}
            , {"mytype": 3, "content": ""}
        ]
        , colors: [
            "#2979ff",
            "#fa3534",
            "#19be6b",
            "#ff9900",
            "#303133",
            "#909399",
            "#c0c4cc",
        ]
    };

    //初始化vue
    var vmMenu = new Vue({
        el: '.vue-container',
        data: pageData,
        methods: {
            initStyle: function (index) {
                var stylestr = "";
                var data = pageData.editorData[index].style;
                Object.keys(data).map(function (v, i, a) {
                    stylestr += v.replace('_', '-') + ':' + data[v] + ';'
                })
                return stylestr;
            },
            //字体背景的颜色
            initFontColor: function (color) {
                return "background-color:" + color;
            },
            //加粗
            fontWeight: function (index) {
                let num = parseInt(pageData.editorData[index].style.font_weight);
                pageData.editorData[index].style.font_weight = (800 == num ? 400 : 800);
            },
            //字体加大
            fontInc: function (index) {
                let num = parseInt(pageData.editorData[index].style.font_size) + 1
                pageData.editorData[index].style.font_size = num + 'px';
            },
            //字体减小
            fontDec: function (index) {
                let num = parseInt(pageData.editorData[index].style.font_size) - 1
                pageData.editorData[index].style.font_size = num + 'px';
            },
            //删除线
            fontDel: function (index) {
                let val = pageData.editorData[index].style.text_decoration || '';
                pageData.editorData[index].style.text_decoration = (val == 'line-through' ? '' : 'line-through');
            },
            //下划线
            fontLine: function (index) {
                let val = pageData.editorData[index].style.text_decoration || '';
                pageData.editorData[index].style.text_decoration = (val == 'underline' ? '' : 'underline');
            },
            //居中显示
            fontAlign: function (index) {
                let val = pageData.editorData[index].style.text_align || 'left';
                let align = ''
                switch (val) {
                    case 'left':
                        align = 'center'
                        break;
                    case 'center':
                        align = 'right'
                        break;
                    default:
                        align = 'left'
                        break;
                }
                pageData.editorData[index].style.text_align = align;
            },
            //选择字体颜色
            fontSetColor: function (index, color) {
                pageData.editorData[index].style.color = color;
            },
            //上升模块
            itemUp: function (index) {
                if (index > 0) {
                    var itemData = pageData.editorData[index];
                    pageData.editorData.splice(index, 1);
                    pageData.editorData.splice(index - 1, 0, itemData);

                }
            },
            //下降模块
            itemDown: function (index) {
                if (index + 1 < pageData.editorData.length) {
                    var itemData = pageData.editorData[index];
                    pageData.editorData.splice(index, 1);
                    pageData.editorData.splice(index + 1, 0, itemData);

                }
            },
            //删除模块
            itemDel: function (index) {
                pageData.editorData.splice(index, 1);
            },
            //添加一个新的模块
            itemAdd: function (index, type, groupid) {
                var itemData = null;
                switch (type) {
                    case 1:
                        itemData = {
                            mytype: 1,
                            content: "示例文字",
                            style: {
                                'font_size': '18px', 'font_weight': '', 'text_decoration': '', 'text_align': 'center', 'color': '#303133'
                            }
                        };
                        break;
                    case 2:
                        itemData = {
                            mytype: 2,
                            content: "",
                            default: 0
                        };
                        break;
                    case 3:
                        itemData = {
                            mytype: 3,
                            content: ""
                        };
                        break;
                    default:
                        alert('暂不支持');
                        break;
                }
                if (itemData) {
                    if (groupid) itemData.groupid = groupid;
                    pageData.editorData.splice(index, 0, itemData);
                }
            },
            //上传图片
            changeCoverImg: function (event, index) {
                this.$refs[`fileInput${index}`][0].click()
            },
            getFile: function (e,index) {
                console.log(e,index)
                var file = e.target.files[0]
                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function (e) {
                    pageData.editorData[index].content = this.result;
                    pageData.editorData[index].default = 1;
                }
            },
            submit:function(){
                let data = JSON.stringify(pageData.editorData)
                console.log(data)
            },
            //一个用于阻止冒泡的事件
            stopclick: function () {},
        },
        //实例被调用后
        created: function () {
        }
    });
</script>
</html>